<!-- src/views/AccountProtection.vue -->
<template>
  <div>

    <Card>
      <CardHeader>
        <CardTitle class="text-2xl font-bold tracking-tight">
          账号保护
        </CardTitle>
        <CardDescription class="text-muted-foreground">
          通过技术能力分析多重风险因子，开启后账号安全无忧
        </CardDescription>
      </CardHeader>
      <CardContent>
        <div class="space-y-4 mt-5">
          <div class="flex items-center justify-between">
            <div>
              <h3 class="text-lg font-semibold">两步验证</h3>
              <p class="text-sm text-gray-500">使用手机验证码进行双重认证</p>
            </div>
            <Switch v-model="twoFactorAuth" />
          </div>
          <Separator />
          <div class="flex items-center justify-between">
            <div>
              <h3 class="text-lg font-semibold">登录通知</h3>
              <p class="text-sm text-gray-500">在新设备登录时发送邮件通知</p>
            </div>
            <Switch v-model="loginNotification" />
          </div>
          <Separator />
          <div class="flex items-center justify-between">
            <div>
              <h3 class="text-lg font-semibold">异常行为警告</h3>
              <p class="text-sm text-gray-500">检测到异常行为时发送短信警告</p>
            </div>
            <Switch v-model="unusualActivityAlert" />
          </div>
        </div>
      </CardContent>
    </Card>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import {
  Card,
  CardHeader,
  CardTitle,
  CardContent,
  CardDescription
} from '@/components/ui/card'
import { Switch } from '@/components/ui/switch'
import { Separator } from '@/components/ui/separator'

const twoFactorAuth = ref(false);
const loginNotification = ref(true);
const unusualActivityAlert = ref(true);
</script>
